import React from 'react';
import { Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { isImg } from './utils';

class Banner extends React.PureComponent {
  render() {
    return (
      <div className="banner0">
        <QueueAnim
          key="QueueAnim"
          type={['bottom', 'top']}
          delay={200}
          className="banner0-text-wrapper"
        >
          <div key="title" className="banner0-title">
            {typeof '/images/HqnZZjBjWRbjyMr.png' === 'string' &&
            '/images/HqnZZjBjWRbjyMr.png'.match(isImg) ? (
              <img src="/images/HqnZZjBjWRbjyMr.png" width="100%" alt="img" />
            ) : (
              '/images/HqnZZjBjWRbjyMr.png'
            )}
          </div>
          <div key="content" className="banner0-content">
            一个高效的页面动画解决方案
          </div>
          <Button ghost key="button" className="banner0-button">
            Learn More
          </Button>
        </QueueAnim>
        <TweenOne
          animation={{
            y: '-=20',
            yoyo: true,
            repeat: -1,
            duration: 1000,
          }}
          className="banner0-icon"
          key="icon"
        >
          <DownOutlined />
        </TweenOne>
      </div>
    );
  }
}
export default Banner;
